<template>
	<view style="padding-bottom: 30px;">
		
		
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<view class="skill-container" style="margin-top: 15px;">
			<view class="skill-con" v-for="item in skilData" :key="item.id" @tap="toRouter(item)">
				<view class="skill-left">
					{{ item.name }}
				</view>
				<view class="skill-right">
					<uni-icons type="right" size="25" color="#000"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSkillData } from '@/api/skill.js'
	export default {
		data() {
			return {
				pageDesign: {
					pageName: '技能认证'
				},
				theme: getApp().globalData.theme, //主题
				skilData:[]
			};
			
		},
		onLoad() {
			this.getskillList()
		},
		methods:{
			toRouter(item){
				const skillCategoryId = item.children[0].parentId
				uni.navigateTo({
					 url: `/subpkg/skill/applyFor/applyFor?name=${item.name}&id=${item.id}&skillCategoryId=${skillCategoryId}`
				})
				
			},
			async getskillList(){
				const { data } = await getSkillData()
				this.skilData = data
				// console.log(data)
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.bgLiner{
	background: linear-gradient(to right, #D2B370, #EACE8F);
	color: #000;
}
.skill-container{
	width: 95%;
	margin: 21rpx auto;
	.skill-con{
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		border-radius: 45rpx;
		padding: 0 20rpx 0 40rpx;
		margin-bottom: 25.78rpx;
	}
	.skill-left{
		font-weight: 400;
		color: #000;
		font-size: 28rpx;
		letter-spacing: 1px;
	}
}
</style>
